<template>
    <div class="options">
        <button class="select-all-btn" @click="checkAll">全选</button>
        <button class="notice-btn" @click="notice">通知</button>
        <button class="silence-btn" @click="silence">禁言</button>
        <button class="banned-btn" @click="banned">封号</button>
    </div>
    <div class="user-list">
        <itemVue v-for="(item,key) in showData" :key="item.userId" :state= item :isChecked="Allchecked"/>
    </div>
    <van-pagination v-model="currentPage" :total-items="Data.length" :items-per-page="PerPageNum" mode="simple" @change="PageChange"/>
    <!-- 弹出层 -->
    <van-popup v-model:show="showPopup" round position="bottom" @close="cancle" :style="{ height: '30%' }">
        <div v-show="showNotice">
            <div class="popupBtn">
            <van-button size="small" type="danger" @click="cancle">取消</van-button>
            <van-button size="small" type="success" @click="noticeConfirm">确认</van-button>
        </div>
        <van-field v-model="noticeMessage" label-align="center" rows="1" autosize label="通知" type="textarea" placeholder="请输入通知内容" />
    </div>
        <van-datetime-picker v-model="currentDate" type="datetime" :title=timeTitle item-height="26" :min-date="minDate" :max-date="maxDate" v-show="showTimeChoose" @confirm="TimeChooseConfirm" @cancel="cancle" />
    </van-popup>
</template>

<script>
import { reactive, toRefs,onBeforeMount } from 'vue';
import { useStore } from "vuex"
import axios from '@/api/axios';
import itemVue from '../components/user-item.vue'
import { Toast } from 'vant';
export default {
    name: 'user',
    setup() {
        const state = reactive({
            showPopup: false,   //展示弹出层
            showNotice: false,   //展示通知输入栏
            showTimeChoose:false,
            userType:0,
            timeTitle:'',
            currentPage: 1,
            PageNums:10,
            currentDate:new Date(),
            minDate:new Date(),
            maxDate:new Date(2032,1,1),
            noticeMessage: '',   //通知内容
            Allchecked: false,  //全选所有
            Data:[],
            PerPageNum:10,
            showData: []
        })

        const store = useStore()

        onBeforeMount(async() => {
            const res = await axios.get('/admin/getUserData')
            state.Data = res.data
            state.userType = store.state.userInfo.userPower
            state.showData = res.data.slice((state.currentPage - 1) * state.PerPageNum ,state.PerPageNum * state.currentPage)
        })

        function PageChange(e){
            state.showData = state.Data.slice((e - 1) * state.PerPageNum,e * state.PerPageNum)
        }

        function cancle() {     //关闭弹出层
            state.showPopup = false
            state.showNotice = false
            state.showTimeChoose = false
        }

        function checkAll() {   //全选
            state.Allchecked = !state.Allchecked
        }

        function notice() {     //发通知
            if(state.userType <= 0){
                Toast.fail('权限不足')
                return
            }
            state.showPopup = !state.showPopup
            state.showNotice = true
        }
        function noticeConfirm() {  //确认发出通知
            state.showPopup = false
            state.showNotice = false
        }
        function showTimeChoose(){  //时间选择器弹出控制
            if(state.userType <= 0){
                Toast.fail('权限不足')
                return
            }
            state.showPopup = !state.showPopup
            state.showTimeChoose = true
        }
        function silence() {    //禁言
            if(state.userType <= 0){
                Toast.fail('权限不足')
                return
            }
            state.timeTitle = '请选择禁言时间'
            showTimeChoose()
        }

        function banned(){      //封号
            if(state.userType <= 0){
                Toast.fail('权限不足')
                return
            }
            state.timeTitle = '请选择封号时间'
            showTimeChoose()
        }

        async function TimeChooseConfirm(){   //输出禁言或封号时间
            var res
            if(state.timeTitle == '请选择禁言时间'){
                res =await axios.post('/admin/silenceUser',{id:store.state.selectedUsers,data:{silenceTime:state.currentDate}})
            }else if(state.timeTitle == '请选择封号时间'){
                res =await axios.post('/admin/bannedUser',{id:store.state.selectedUsers,data:{bannedTime:state.currentDate}})
            }
            Toast.success(res.msg) 
            state.Data = res.data
            state.showData = res.data.slice((state.currentPage - 1) * state.PerPageNum ,state.PerPageNum * state.currentPage)
            cancle()
        }

        return {
            ...toRefs(state),
            checkAll,
            notice,
            noticeConfirm,
            cancle,
            silence,
            banned,
            PageChange,
            TimeChooseConfirm
        };
    },
    components: {
        itemVue
    }
}
</script>

<style lang="less" scoped>
.options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;

    button {
        height: 24px;
        border-radius: 10px;
        border: none;
        color: aliceblue;
    }

    .select-all-btn {
        margin-left: 20px;
        background-color: #7adae3;
        color: black;
    }

    .notice-btn {
        color: black;
        background-color: rgb(181, 226, 34);
    }

    .silence-btn {
        background-color: rgb(42, 124, 205);
    }

    .banned-btn {
        margin-right: 20px;
        background-color: rgb(228, 50, 37);
    }
}

.user-list {
    height: 450px;
    overflow-y: scroll;
}

.popupBtn {
    display: flex;
    justify-content: space-between;

}
</style>